<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="园所名称" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入园所名称" maxlength="25" @input="handleInput" clearable
          size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="所在地区" prop="area">
          <el-select v-model="queryParams.area" clearable placeholder="请选择地区">
            <el-option v-for="item in queryRoomList" :key="item.id" :label="item.title" :value="item.id" size="small">
            </el-option>
          </el-select>
        </el-form-item>
      <el-form-item label="园所性质" prop="schoolType">
        <el-select v-model="queryParams.schoolType" placeholder="请选择园所性质" clearable size="small">
          <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
            :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="地区类型" prop="nature">
        <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
          <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel"
            :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="园所等级" prop="level">
        <el-select v-model="queryParams.level" placeholder="请选择园所等级" clearable size="small">
          <el-option v-for="dict in leveltypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
            :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="所在地区" prop="level">
        <el-select v-model="queryParams.level" placeholder="请选择园所等级" clearable size="small">
          <el-option v-for="dict in leveltypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
            :value="dict.dictValue" />
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="studentCheckList">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column type="index" label="序号" align="center" :index="customeIndex" width="80"></el-table-column>
      <el-table-column label="园所名称" align="center" prop="title" />
      <el-table-column label="园长" align="center" prop="director" />
      <!-- <el-table-column label="地区" align="center" prop="area" /> -->
      <el-table-column label="园所性质" align="center" prop="schoolType" :formatter="schoolTypeFormat" />
      <el-table-column label="地区类型" align="center" prop="nature" :formatter="schoolNatureFormat" />
      <el-table-column label="是否全日制" align="center" prop="isFull" :formatter="isCurrentFormat1" />
      <el-table-column label="是否普惠" align="center" prop="isGeneral" :formatter="isCurrentFormat" />
      <el-table-column label="园所等级" align="center" prop="level" :formatter="leveltypeFormat" />
      <el-table-column label="幼儿人数" align="center" prop="kids" />
      <el-table-column label="教职工人数" align="center" prop="staffs" />
      <!-- <el-table-column label="园所设施情况" align="center" prop=""  /> -->
      <el-table-column label="园所地址" align="center" prop="address" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetails(scope.row)" >详情</el-button> -->
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改学校 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body :close-on-click-modal="false"
      @close="cancel">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="基础信息">
          <el-form ref="schoolform" :model="schoolform" :rules="rules" label-width="90px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="学校昵称" prop="title">
                  <el-input v-model="schoolform.title" placeholder="请输入学校昵称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="学校ID" prop="code">
                  <el-input v-model="schoolform.code" placeholder="请输入学校代码" :disabled="title == '修改学校' ? true : false" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="园所性质" prop="schoolType">
                  <el-select v-model="schoolform.schoolType" placeholder="请选择园所性质" clearable size="small"
                    style="width: 100%;">
                    <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                      :value="dict.dictValue" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地区类型" prop="nature">
                  <el-select v-model="schoolform.nature" placeholder="请选择地区类型" clearable size="small"
                    style="width: 100%;">
                    <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel"
                      :value="parseFloat(dict.dictValue)" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="全日制" prop="isFull">
                  <el-radio-group v-model="schoolform.isFull">
                    <el-radio v-for="dict in isCurrentOptions" :key="dict.dictValue" :label="dict.dictValue">{{
                      dict.dictLabel }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="普惠" prop="isGeneral">
                  <el-radio-group v-model="schoolform.isGeneral">
                    <el-radio v-for="dict in isCurrentOptions" :key="dict.dictValue" :label="dict.dictValue">{{
                      dict.dictLabel }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="园所等级" prop="level">
                  <el-select v-model="schoolform.level" placeholder="请选择园所等级" clearable size="small" style="width: 100%;">
                    <el-option v-for="dict in leveltypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                      :value="parseFloat(dict.dictValue)" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="学校地址" prop="address">
                  <el-input v-model="schoolform.address" placeholder="请输入学校地址" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="经度" prop="lng">
                  <el-input v-model="schoolform.lng" placeholder="请输入经度" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="纬度" prop="lat">
                  <el-input v-model="schoolform.lat" placeholder="请输入纬度" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="详细信息" name="详细信息">
          <el-form ref="form" :model="schoolform" :rules="rules" label-width="90px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="园长" prop="director">
                  <el-input v-model="schoolform.director" placeholder="请输入园长姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="phone">
                  <el-input v-model="schoolform.phone" placeholder="请输入联系电话" clearable size="small" style="width: 240px"
                    @keyup.enter.native="handleQuery" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="开园时间" prop="userName">
                  <el-date-picker v-model="schoolform.openDate" type="date" value-format="yyyy-MM-dd" :editable="false"
                  :picker-options="pickerOptions"
                    placeholder="请选择开园时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开设班级" prop="openClass">
                  <el-input v-model="schoolform.openClass" placeholder="请输入开设班级" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="学生人数" prop="kids">
                  <el-input-number v-model="schoolform.kids" :min="0" placeholder="请输入学生人数"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="教职工人数" prop="staffs">
                  <el-input-number v-model="schoolform.staffs" :min="0" placeholder="请输入教职工人数"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="学校简介">
                  <el-input v-model="schoolform.description" type="textarea" placeholder="请输入内容"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- <el-dialog title="园所信息" :visible.sync="open" width="500px" append-to-body>
              <div>园所设施情况</div>
              <div>班级幼儿情况</div>
              <div>教职工情况信息</div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog> -->

  </div>
</template>

<script>
import { schoolDetail, addschool, updateschool } from "@/api/qu/ysgl";
import { selectRoom } from "@/api/base/room";
import { getToken } from "@/utils/auth";
import { selectStudent } from "@/api/base/student";

export default {
  name: "StudentCheck",

  data() {
    const phoneValidate = (rule, val, callback) => {
      const reg = /[^0-9\-.]+/
      if (reg.test(val)) {
        callback(new Error("请输入正确的联系方式"));
      } else {
        callback()
      }
    }
    const lngValidator = (rule,val,callback) => {
      let reg = /^[0-9]+(\.[0-9]+)?$/
      if(!reg.test(val)){
        console.log(reg.test(val),'-------reg.test(val)')
        callback(new Error("请输入正确的经度"));
      }else{
        callback();
      }
    }
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      school: {
        name: '张三', age: '5', sex: '男', class: '小二班', father: '张一', mother: '王五', medicalHistory: '关于病史的信息'
      },
      schoolTypeOptions: [],
      schoolNatureOptions: [],
      leveltypeOptions: [],
      queryRoomList: [],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      //学生数据
      studentCheckList: [],
      title: "",
      // 是否显示弹出层
      open: false,
      schoolform: {
        kids: 0,
        staffs: 0,
      },

      // 表单校验
      rules: {
        lng: [
          { required: true, message: "经度不能为空", trigger: "blur" },
          { message: "请输入正确的经度", trigger: "blur",validator:lngValidator }
        ],
        lat: [
          { required: true, message: "纬度不能为空", trigger: "blur" }
        ],
        title: [
          { required: true, message: "学校昵称不能为空", trigger: "blur" }
        ],
        code: [
          { required: true, message: "学校代码不能为空", trigger: "blur" }
        ],
        schoolType: [
          { required: true, message: "园所性质不能为空", trigger: "blur" }
        ],
        nature: [
          { required: true, message: "地区类型不能为空", trigger: "blur" }
        ],
        level: [
          { required: true, message: "园所等级不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "学校地址不能为空", trigger: "blur" }
        ],
        phone: [
          { message: "请输入正确的联系方式", trigger: "blur", validator: phoneValidate }
        ],

      },
      activeName: '基础信息',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null, //园所名称
        area: '无极县',  //地区
        nature: null, //地区类型
        level: null, //园所等级
        schoolType: null,  //园所性质
      },
      // 是否当前字典
      isCurrentOptions: [],

    };
  },
  created() {
    this.getList();
    this.getDicts("park_type").then(response => {
      this.schoolTypeOptions = response.data;
    });
    this.getDicts("school_nature").then(response => {
      this.schoolNatureOptions = response.data;
    });
    this.getDicts("school_level").then(response => {
      this.leveltypeOptions = response.data;
    });
    this.getDicts("sys_yes_no").then(response => {
      this.isCurrentOptions = response.data;
    });
  },
  methods: {

    /** 查询列表 */
    async getList() {
      try {
        const obj = {
          title: this.queryParams.title,
          area: this.queryParams.area,
          nature: this.queryParams.nature,
          level: this.queryParams.level,
          schoolType: this.queryParams.schoolType,
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize
        };
        const data = await schoolDetail(obj);
        this.studentCheckList = data.rows;
        this.total = data.total;
        this.loading = false;
      } catch (error) {
        console.log(error);
      }
    },
    // 序号
    customeIndex(index) {
      return index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
    },
    // 是否当前字典翻译
    isCurrentFormat(row, column) {
      return this.selectDictLabel(this.isCurrentOptions, row.isGeneral);
    },
    isCurrentFormat1(row, column) {
      return this.selectDictLabel(this.isCurrentOptions, row.isFull);
    },
    handleInput(val) {
      let regtszf = /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g // 特殊字符正则
      let regkg = /[ ]/g// 空格正则
      this.queryParams.title = val.replace(regtszf, '').replace(regkg, '')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        title: null, //园所名称
        area: null,  //地区
        nature: null, //地区类型
        level: null, //园所等级
        schoolType: null,  //园所性质
      },
        this.resetForm("queryForm");
      this.handleQuery();
    },
    // 园所性质字典翻译
    schoolTypeFormat(row, column) {
      return this.selectDictLabel(this.schoolTypeOptions, row.schoolType);
    },
    //地区类型字典翻译
    schoolNatureFormat(row, column) {
      return this.selectDictLabel(this.schoolNatureOptions, row.nature);
    },
    //园所等级字典翻译
    leveltypeFormat(row, column) {
      return this.selectDictLabel(this.leveltypeOptions, row.level);
    },
    //新增学校
    handleAdd() {
      this.schoolform = {};
      this.open = true;
      this.title = '新增学校';
    },
    async handleUpdate(rows) {
      this.open = true;
      this.title = '修改学校';
      const obj = {
        id: rows.id
      }
      this.schoolform = Object.assign({}, rows);
    },
    handleClick() {
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.schoolform = {}
      this.$refs["schoolform"].resetFields()
      console.log(this.$refs["schoolform"], '-------this.$refs["schoolform"]')
    },
    submitForm() {
      this.$refs["schoolform"].validate(valid => {
        if (valid) {
          if (this.title == '修改学校') {
            console.log(this.schoolform);
            updateschool(this.schoolform).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            console.log(this.schoolform);
            addschool(this.schoolform).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      })
    }
  }
};
</script>
